<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/jquery-3.4.1.min.js"></script>
    <title>首页</title>
    <script>
        window.onload = function () {
            // 图片轮播
            var pic = ['indexpic1.jpg', 'indexpic2.jpg', 'indexpic3.jpg', 'indexpic4.jpg']
            var inner = document.getElementById("inner").getElementsByTagName("img")[0]
            var i = 0;
            window.setInterval(function () {
                inner.src = "images/" + pic[i];
                i++;
                if (i == 3) i = 0;
            }, 3000)

            //登录后显示当前用户
            if (localStorage.getItem('loginName')) {
                var links = document.querySelectorAll('#headright a')
                for (var i = 0; i < links.length; i++) {
                    links[i].style.display = 'none';
                }
                document.querySelector("#loginName").style.display = 'inline-block';
                document.querySelector("#unregister").style.display = 'inline-block';
                document.querySelector('#headright span').style.display = "none";
                document.querySelector('#loginName').innerHTML = "当前账号：" + '<a href="cebiandaohanglan.html">' + localStorage.getItem('loginName') + '</a>'
            }

        }
        //套餐下拉框
        $(function () {
            $('#secondnav').mouseover(function () {
                $('#choose').css('display', 'block')
            })
            $('#secondnav').mouseout(function () {
                $('#choose').css('display', 'none')
            })
        })

        //健康饮食下拉框
        $(function () {
            $('#down').mouseover(function () {
                $('#updown').css('display', 'block')
            })
            $('#down').mouseout(function () {
                $('#updown').css('display', 'none')
            })
        })


        //注销事件
        function unregister() {
            localStorage.removeItem('loginName');
            location.replace('shouye.html')
        }
        //导航栏固定
        window.onscroll = function () {
            if (document.documentElement.scrollTop >= 80) {
                document.getElementById('bodynav').style.position = 'fixed';
                document.getElementById('bodynav').style.top = 0;
                document.getElementById('bodynav').style.left = 0;
            }
            else {
                document.getElementById('bodynav').style.position = 'static';
            }
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        ul li {
            list-style: none;
        }

        #shouye {
            width: 100%;
            min-width: 1200px;

        }

        #head {
            width: 80%;
            height: 80px;
            background-color: white;
            margin: 0 auto;
            /* background-color: yellow; */
        }

        #logo {
            /* background-color: red; */
            width: 30%;
            height: 80px;
            float: left;
            position: relative;
            left: 10px;
        }

        #headleft {
            width: 50%;
            float: left;
            height: 80px;
            /* background-color: yellow; */
        }

        #headleft1 {
            height: 80px;
            line-height: 80px;
        }

        #textword {
            width: 250px;
            height: 30px;
        }

        #textsearch {
            width: 50px;
            height: 35px;
            border: 1px solid #ccc;
            background: url(images/serach.jpg);
        }

        /*背景图  */
        #login {
            text-decoration: none;
            color: #407434;
        }

        #login img {
            width: 20px;
            height: 80px;
        }

        #headright {
            height: 80px;
            line-height: 80px;
            text-align: center;
        }

        /* 注销按钮 */
        #loginName,
        #unregister {
            display: none;
        }

        #unregister {
            height: 25px;
            width: 50px;
            border: none;
            outline: none;
            border-radius: 5px;
            background: linear-gradient(rgb(160, 191, 124), rgb(101, 147, 74));
            box-shadow: 0 0 3px rgb(64, 116, 52);
            cursor: pointer;
            color: white;
        }

        #bodynav {
            width: 100%;
            height: 60px;
            background-color: rgb(160, 190, 117);
            z-index: 5;
        }

        #nav {
            min-width: 540px;   /*新改内容*/
            width: 80%;
            height: 60px;
            margin: 0 auto;
            background-color: rgb(160, 190, 117);
        }

        #nav li {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            width: 20%;
            float: left;
        }
        
        #nav a {
            color: grey;
            font-weight: bold;
        }

        #nav a:hover {
            color: #407434;
            font-weight: bold;
        }

        /* 下拉框 */
        #choose,
        #updown {
            width: 100%;
            display: none;
        }
        
        #pep,
        #up {
            list-style: none;
            position: relative;
            left: 25%;
        }
        
        #pep dd,
        #up dd {
            width: 60%;
            height: 50px;
            line-height: 50px;
            background-color: rgb(230, 230, 230);
            font-size: 14px;
            position: relative;
        }
        
        #pep dd a,
        #up dd a {
            color: grey;
        }
        /* 图片轮播 */
        #picture {
            width: 100%;
            height: 500px;
            margin: 0 auto;
            overflow: hidden;
            /* border: 1px solid red; */
        }

        #picture img {
            width: 100%;
            height: 500px;
        }

        /* top排行榜以及健康饮食的标题 */
        #navtext1header,
        #navtext2header {
            width: 100%;
            height: 150px;
            /* border: 1px solid blue; */
        }

        #navtext1header h2,
        #navtext1header h3,
        #navtext2header h2,
        #navtext2header h3 {
            padding-top: 30px;
            text-align: center;
        }

        #navtext1header h2,
        #navtext2header h2 {
            color: rgb(64, 116, 52);
        }

        #navtext1header h3,
        #navtext2header h3 {
            color: grey;
        }


        /* 套餐排行榜 */
        #navtext1 {
            width: 80%;
            height: 500px;
            margin: 0 auto;
            /* border: 1px solid red; */

        }

        #natext1bottom {
            width: 100%;
            height: 350px;
            /* border: 1px solid yellow; */
            display: flex;
        }

        .box {
            position: relative;
            perspective: 1000px;
            /*影响3D转换元素*/
            float: left;
            flex: 1;

        }

        .box:nth-child(2) {
            padding-left: 50px;
            padding-right: 50px;
            /* border: 1px solid red; */
        }

        .box img {
            height: 300px;
            width:300px;
            opacity: 1;
            /*不透明级别*/
            transform: translateY(0) rotateX(0);
            transition: all 0.6s ease-in-out 0s;
        }

        .box:hover img {
            transform: translateY(-100%) rotateX(90deg);
            transform-origin: bottom center;
            opacity: 0;
        }

        .box .over-layer {
            padding-left: 50px;
            position: absolute;
            top: 0;
            width: 260px;
            height: 300px;
            opacity: 0;
            background: #333d4b;
            text-align: center;
            padding: 0 20px;
            transition: all 0.60s ease-in-out 0s;
        }

        .box:hover .over-layer {
            opacity: 1;
        }
        .description {
            width: 50%;
            display: block;
            margin: 10px auto 0;
            border-bottom: 1px solid #fff;
            border-top:1px solid #fff;
        }

        .over-layer .title {
            padding-top: 40px;
            color:rgb(101, 147, 74);
        }

        .over-layer h4{
            padding-top: 15px;
            padding-bottom: 15px;
        }
        .over-layer p {
            padding-top: 5px;
            padding-bottom: 5px;
        }
        .over-layer p:nth-child(4){
            padding-top: 20px;
        }

        .over-layer h4 {
            font-size: 20px;
            font-weight: bolder;
            color: #999;
        }

        .over-layer p {
            color: #d3d3d3;
        }
        
        .over-layer p a {
            text-decoration: none;
            color: #999;
        }
        .over-layer p a:hover{
            font-weight: bolder;
            color:rgb(101, 147, 74)
        }

        /* 第三块 */
        /* 鼠标停留图片放大 */
        #nav2twofirst,#nav2topone,#nav2topthree,#nav2onelast{
            overflow: hidden;
        }
        #nav2topone img,#nav2topthree img,#nav2onelast img,#nav2twofirst img {
            transition: all 0.5s ease-in-out;
            transform: translate(0%, 0%) scale(1);
        }
        #nav2topone:hover img,#nav2topthree:hover img,#nav2onelast:hover img,#nav2twofirst:hover img{
            transform: translate(0%, 0%) scale(1.15);
        }

        #navtext2 {
            clear: both;
            width: 80%;
            height: 800px;
            margin: 0 auto;
            /* border: 1px solid red; */
        }
     
        #navtext2top {
            width: 100%;
            height: 200px;
            display: flex;
        }

        #nav2topone {
            width: 40%;
        }

        #nav2topone img,#nav2topthree img,#nav2onefirst,#nav2threefirst,#nav2threelast {
            width: 100%;
            height: 200px;
        }

        #nav2toptwo,#nav2topthree {
            width: 30%;

        }

        #nav2text2bottom {
            width: 100%;
            display: flex;
            height: 400px;
        }

        #nav2bottomone {
            background-color: #fff;
            flex: 2;
        }

        #nav2toptwo h2,
        #nav2threefirst h2,
        #nav2twolast h2,
        #nav2onefirst h2 {
            padding-left: 20px;
            padding-top: 15px;
            color: grey;
        }

        #nav2toptwo p,
        #nav2threefirst p,
        #nav2twolast p,
        #nav2onefirst p {
            color: grey;
            margin: 5px 20px 20px;

        }

        #nav2onelast img {
            width: 100%;
            height: 200px;
        }

        #nav2bottomtwo {
            flex: 5;
        }
    
        #nav2twofirst img {
            width: 100%;
            height: 300px;
            
        }

        #nav2bottomthree {
            flex: 2;
        }
        #nav2threelast{
            background:url(images/nav2top5.jpg);
            background-size:100% 100%;
            /* opacity: 0.9; */
        }
        #nav2threelast a{
            display: none;
        }
        #nav2threelast:hover a {
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(90,90,90);
            opacity: 0.9;
            text-align: center;
            line-height: 180px;
            color: white;
            
        }



        /* 底部 */
        #bottom {
            width: 100%;
            height: 150px;
            background-color: rgba(30, 30, 30, 0.4);
        }

        #bottomtext {
            width: 80%;
            height: 150px;
            margin: 0 auto;
        }

        #bottomleft {
            float: left;
            width: 200px;
            height: 150px;
            position: relative;
            top: 10px;

        }

        #bottomrighttext a,
        #bottomleft span,
        #bottomrighttext span,
        #bottomrighttext a {
            color: grey;
        }

        #bottomleft img {
            width: 200px;
            height: 80px;
        }

        #bottomright {
            width: 100%-200px;
            height: 150px;

        }

        #bottomrighttext {
            padding: 30px;
            position: relative;
            top: 40px;
            left: 30px;
        }

        #bottomrighttext a {
            text-decoration: none;
            margin-left: 15px;
        }
    </style>
</head>

<body>
    <div id="shouye">
        <div id="head">
            <div id="logo">
                <img src="images/logo1.jpg" alt="" width="200px" height="80px">
            </div>
            <div id="headleft">
                <div id="headleft1">
                    <form action="#">
                        <input id="textword" type="text"><input id="textsearch" type="submit" value=" ">
                    </form>
                </div>
            </div>
            <div id="headright">
                <a href="login.html" id="login">登录</a>
                <span>|</span>
                <a href="register.html" id="login">注册</a>
                <span id="loginName"></span>
                <button id="unregister" onclick="unregister()">注销</button>
            </div>
        </div>
        <div id="bodynav">
            <div id="nav">
                <ul>
                    <li><a href="shouye.html">首页</a></li>
                    <li id="secondnav"><a href="#">套餐</a>
                        <div id="choose">
                            <dl id="pep">
                                <dd>人数</dd>
                                <dd><a href="meetmenu2-3.html">2-3人</a></dd>
                                <dd><a href="#">4-6人</a></dd>
                                <dd><a href="#">7-8人</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li id="down"><a href="#">健康饮食 </a>
                        <div id="updown">
                            <dl id="up">
                                <dd><a href="">人体群众</a></dd>
                                <dd><a href="laoren.html">老人</a></dd>
                                <dd><a href="">孕妇</a></dd>
                                <dd><a href="">青少年</a></dd>
                            </dl>
                        </div>
                    </li>

                    <li><a href="fenxiangjiemian.html">分享圈</a></li>
                    <li><a href="contactus.html">联系我们</a></li>
                </ul>
            </div>
        </div>
        <div id="picture">
            <div id="inner">
                <img src="images/indexpic1.jpg" alt="">
            </div>
        </div>
        <div id="body">
            <div id="navtext1">
                <div id="navtext1header">
                    <h2>Set Meal List</h2>
                    <h3>套餐排行榜</h3>
                </div>
                <div id="natext1bottom">
                    <div class="box">
                        <img src="images/top1.jpg" alt="">
                        <div class="over-layer">
                            <h3 class="title">TOP1</h3>
                            <h4>夏日营养套餐</h4>
                            <div class="description">
                                <p>鲫鱼豆腐汤</p>
                                <p>口水鸡</p>
                                <p>凉拌皮蛋豆腐</p>
                                
                            </div>
                            <p><a href="top1.html">>>详情</a></p>

                        </div>
                    </div>
                    <div class="box">
                        <img src="images/top2.jpg" alt="">
                        <div class="over-layer">
                            <h3 class="title">TOP2</h3>
                            <h4>夏日至尊套餐</h4>
                            <div class="description">
                                <p>红烧肉炖豆角</p>
                                <p>青椒肉丝</p>
                                <p>紫菜蛋花汤</p>
                                
                            </div>
                            <p><a href="top2.html">>>详情</a></p>

                        </div>
                    </div>
                    <div class="box">
                        <img src="images/top3.jpg" alt="">
                        <div class="over-layer">
                            <h3 class="title">TOP3</h3>
                            <h4>夏日缤纷套餐</h4>
                            <div class="description">
                                <p>鱼香肉丝</p>
                                <p>酸辣土豆丝</p>
                                <p>肉沫蒸豆腐</p>
                                
                            </div>
                            <p><a href="top3.html">>>详情</a></p>

                        </div>
                    </div>
                </div>

            </div>
            <div id="navtext2">
                <div id="navtext2header">
                    <h2>Healthy eating habits</h2>
                    <h3>健康饮食</h3>
                </div>
                <div id="navtext2top">
                    <div id="nav2topone">
                        <img src="images/nav2top1.jpg" alt="">
                    </div>
                    <div id="nav2toptwo">
                        <h2>维生素</h2>
                        <p>复合维生素早饭后吃。研究表明，补充适合自己的复合维生素对身体健康大有裨益。</p>
                    </div>
                    <div id="nav2topthree"><img src="images/nav2top2.jpg" alt=""></div>
                </div>
                <div id="nav2text2bottom">
                    <div id="nav2bottomone">
                        <div id="nav2onefirst">
                            <h2>便捷补钙</h2>
                            <p>早起的第一件事，就是在杯子里倒满脱脂奶。然后喝掉1/5，再用咖啡把它填满。这样，你就能摄入人体每天所需的25%的维生素D和30%的钙。</p>
                        </div>
                        <div id="nav2onelast"><img src="images/nav2top3.jpg" alt=""></div>
                    </div>
                    <div id="nav2bottomtwo">
                            <div id="nav2twofirst">
                                <img src="images/nav2top4.jpg" alt="">
                            </div>
                        <div id="nav2twolast">
                            <h2>水的妙用</h2>
                            <p>一大杯水可以帮你稀释体内钠的浓度，让你离高血压远一点。</p>
                        </div>
                    </div>
                    <div id="nav2bottomthree">
                        <div id="nav2threefirst">
                            <h2>脂肪保卫</h2>
                            <p>研究表明，在一顿饭摄入50—80克脂肪后的几个小时，血管弹性降低，血液凝血因子急剧上升。所以，即使白天吃得很清淡，也不要试图在晚上补偿自己。</p>
                        </div>
                        <div id="nav2threelast">
                            <a href="meetmenu2-3.html">更多详情</a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="bottom">
            <div id="bottomtext">
                <div id="bottomleft">
                    <img src="images/logo1.png" alt=""><br>
                    <span>一年四季，一日三餐</span>
                </div>
                <div id="bottomright">
                    <div id="bottomrighttext">
                        <span>关于恰饭吧</span>
                        <a href="#">网站介绍</a>
                        <a href="#">加入我们</a>
                        <a href="#">联系我们</a>
                        <a href="#">商务合作</a>
                        <a href="#">用户协议</a>
                        <a href="#">隐私政策</a>
                        <a href="#">网站地图</a>
                        <a href="#">友情链接</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>